<template>
  <div class="wcbg">
    <TopBar color="#fff" style="backgroundColor:transparent"></TopBar>
    <div class="btn" @click="clickBtn">开始答题</div>
    <img src="https://bigzhuan.com/img/wcewm.png">
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import {getWXSDK} from '../../../service/getData.js'
var wx = require('weixin-js-sdk');
let time = null

export default {
  components:{
    TopBar
  },
  data(){
    return {
    }
  },
  methods:{
    clickBtn(){
      location.href = "http://cn.mikecrm.com/NfbpUnN"
    },
    getSDK(data){
      //wx是引入的微信sdk
      //通过config接口注入权限验证配置
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxe93a5b09e46e21b3', // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名，见附录1
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });

      wx.ready(function() { //通过ready接口处理成功验证
      // config信息验证成功后会执行ready方法
        wx.onMenuShareAppMessage({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
            title: '世界杯如火如荼，比赚为您生活添激情。红包等你领~~', // 分享标题
            desc: '在这个炎热的夏季，世界杯的绿荫场上，决战对阵终于揭晓：高昂着头颅的高卢雄鸡和一黑到底的格子军团，谁能笑到最后，我们拭目以待！参加我们的小游戏，选出您心目中的冠军！个个有红包！人人不落空！', // 分享描述
            link: 'https://www.bigzhuan.com/worldCup', // 分享链接
            imgUrl: 'https://www.bigzhuan.com/img/wxshare.jpg', // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
            });
            wx.onMenuShareTimeline({ //分享朋友圈
            title: '世界杯如火如荼，比赚为您生活添激情。红包等你领~~', // 分享标题
            link: 'https://www.bigzhuan.com/worldCup',
            imgUrl: 'https://www.bigzhuan.com/img/wxshare.jpg', // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
      });
      wx.error(function(res){//通过error接口处理失败验证
          // config信息验证失败会执行error函数
      });
    }
  },
  created(){
    console.log(location.href);
    getWXSDK(location.href)
      .then(res=>{
        console.log(res);
        this.getSDK(res)
      })
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';
.wcbg{
  .wh(10rem,17.8rem);
  background: url('https://bigzhuan.com/img/wcbg.jpg') 100% 100% no-repeat;
  background-size: 100%;
  position: relative;
  .btn{
    .wh(80%,1.2rem);
    .bg(#e1472c);
    .borderRadius(2rem);
    margin:0 auto;
    .fx();
    .sc(0.48rem,#ffffff);
    position: absolute;
    left: 0;
    right: 0;
    top: 9.5rem;
  } 
  img{
    .wh(2.12rem,2.1067rem);
    position: absolute;
    bottom: 1rem;
    right: .65rem;
  }
}
</style>
